<template>
  <div class="container">
    <titleTop :titleTxet="titleTxet"></titleTop>

    <div class="w1 container input_box">
      <div class="font_32 c_44 m_r20">
        <span>您的老手机号码</span>
      </div>
      <div class="p_t15 p_d15 b_d font_28 c_28">
        <input type="number" placeholder="请输入你的手机号码" v-model="mobile_num1">
      </div>
    </div>

    <div class="w1 container input_box">
      <div class="font_32 c_44 m_r20">
        <span>您的新手机号码</span>
      </div>
      <div class="p_t15 p_d15 b_d font_28 c_28">
          <input type="number" placeholder="请输入你的手机号码" v-model="mobile_num2">
      </div>
    </div>
     <div class="w1 container">
      <div class="font_32 c_44 m_r20">
        <span>您的验证码</span>
      </div>
      <div class="p_t15 p_d15 b_d font_28 c_28 flex f_bet">
          <input type="number" placeholder="请输入验证码" v-model="varcode">
          <span class="cord"  @click="sendSign()" v-if="loopTime < 0">获取验证码</span>
          <span class="cord" v-else>{{loopTime}}s后重试</span>
      </div>
    </div>
    <div
      class="sub-btn t_center font_36 c_ff"
      @click="mySet"
    >
      <span @click="Confirm()">确认更换</span>
    </div>
  </div>
</template>
<script>
import titleTop from "../../com/title";
import {Dialog} from 'vant';
import * as common from "../../../api/common.js";
export default {
  components: { titleTop },
  data() {
    return {
      titleTxet: {
        titleName: "修改手机号",
        IsBool: true,
        IsShare: false
      },
      signature: "",
      mobile_num1: "",
      mobile_num2: "",
      varcode:"",
      loopTime: -1,
    };
  },
  mounted(){
    mui.back = function() {
      window.history.go(-1);
    }
  },
  methods: {
    sendSign(){
      let phone = this.mobile_num2;

      if (!phone || !/^[1][3-9][0-9]{9}$/.test(phone)) {
        Dialog.alert({
          message: "请输入正确的手机号码"
        });
      } else {
        common.sendCode({ phone: phone }).then(res => {
          console.log(res);
          if (res.status == 200) {
            this.loopTime = 60;
            this.countDown(this.loopTime);
          }
        });
      }
    },

    Confirm(){
      let phone1 = this.mobile_num1;
      let phone2 = this.mobile_num2;
      if (!phone1 || !/^[1][3-9][0-9]{9}$/.test(phone1)||!phone2 || !/^[1][3-9][0-9]{9}$/.test(phone2)) {
        Dialog.alert({
          message: "请输入正确的手机号码"
        });
      }else if (!this.varcode) {
        Dialog.alert({
          message: "请输入验证码"
        });
      }else{
        console.log(this.$store.state.user_id);
        let parms = {
          user_id:this.$store.state.user_id,
          old_mobile_num:this.mobile_num1,
          mobile_num:this.mobile_num2,
          varcode:this.varcode,
          is_skip:0
        }
        common.BindingMobile(parms).then(res=>{
          console.log(res);
          if (res.status==200) {
            Dialog.alert({
              message: res.msg
            }).then(()=>{
              history.go(-1);
            });
          }
        })
      }

    },
    mySet() {
      this.$router.push({ path: "/myPhones" });
    },

    countDown(times) {
      if (times > 0 && !isNaN(times)) {
        setTimeout(() => {
          this.loopTime--;
          this.loopTime =
            this.loopTime < 10 ? "0" + this.loopTime : this.loopTime;
          this.countDown(this.loopTime);
        }, 1000);
      } else {
        this.loopTime = -1;
      }
    }
  }
};
</script>
<style scoped>
.input_box{
    margin-top: 108px;
    margin-bottom: 80px;
}
.cord{
    border-radius: 8px;
    border: 1px solid #884ca4;
    padding: 10px 15px;
    color: #884ca4;
}
.sub-btn {
  width: 400px;
  height: 80px;
  line-height: 80px;
  margin: 0 auto;
  background: #884ca4;
  border-radius: 10px;
  margin-top: 105px;
}
.sub-btn span{
  color: #fff;
}
.myPhone {
  width: 74px;
  height: 114px;
}
.img_box {
  margin-top: 186px;
  margin-bottom: 106px;
}
</style>


